<template>
  <div class="container">
    <div class="title">
      {{ flag ? '单位联网分布' : '单位安装统计' }}
    </div>

    <!-- <div class="div_box">
      <div>
        <div>接入单位</div>
        <div><span class="span1">{{orgcount}}</span>家</div>
      </div>
      <div>
        <div>建筑数量</div>
        <div><span class="span2">{{spaccount}}</span>家</div>
      </div>
    </div> -->

    <!-- <div id="main" style="width: 95%; height: 65%"></div> -->
    <!-- <div class="progress">
      <el-progress type="circle" :percentage="35" :stroke-width="12" :width="90" color="#248DFF" text-color="#fff"></el-progress>
    <el-progress type="circle" :percentage="35" :stroke-width="12" :width="90" color="#FFC328" text-color="#fff"></el-progress>
    <el-progress type="circle" :percentage="35" :stroke-width="12" :width="90" color="#1EC9FF" text-color="#fff"></el-progress>
    </div> -->

    <div id="main" style="width: 100%; height: 84%" v-show="flag"></div>

    <div @click="onClick" class="switchover">
      <!-- <el-image :src="switchover"
        style="width: 28px; height: 27px; cursor: pointer"></el-image> -->
      <i class="iconfont changyong_qiehuan " style="font-size: 22px; cursor: pointer;color: #09E8FC;"></i>
    </div>
    <el-tooltip class="more" effect="dark" content="更多" placement="top">
      <i class="iconfont gengduo1 " @click="onmore" style="font-size: 22px; cursor: pointer;color: #09E8FC;"></i>
    </el-tooltip>
    <div class="content" v-show="!flag" style="font-weight: 600;">
      <div style="text-align: left;padding-left: 5px;">单位名称</div>
      <div>设备总数</div>
      <!-- <div v-if="user.tenantId != '1821064521231855617'">22年</div>
      <div v-if="user.tenantId != '1821064521231855617'">23年</div>
      <div v-if="user.tenantId != '1821064521231855617'">24年</div>
      <div v-if="user.tenantId == '1821064521231855617'">24年</div>
      <div v-if="user.tenantId == '1821064521231855617'">25年</div>
      <div v-if="user.tenantId == '1821064521231855617'">26年</div> -->
      <div>23年</div>
      <div>24年</div>
      <div>25年</div>
    </div>

    <div class="count" v-show="!flag">

      <div class="content" v-for="(item, index) in orgDevice" :key="index">
        <div @click="handleNodeClick(item)" class="text-ellipsis" :title="item.orgName.length > 6 ? item.orgName : ''">{{
          item.orgName }}</div>
        <div title="12312">{{ item.sun2 }}</div>
        <div>{{ item.count23 }}</div>
        <div>{{ item.count24 }}</div>
        <div>{{ item.count25 }}</div>
        <!-- <div v-if="user.tenantId != '1821064521231855617'">{{ item.count22 }}</div>
        <div v-if="user.tenantId != '1821064521231855617'">{{ item.count23 }}</div>
        <div v-if="user.tenantId != '1821064521231855617'">{{ item.count24 }}</div>
        <div v-if="user.tenantId == '1821064521231855617'">{{ item.count24 }}</div>
        <div v-if="user.tenantId == '1821064521231855617'">{{ item.count25 }}</div>
        <div v-if="user.tenantId == '1821064521231855617'">{{ item.count26 }}</div> -->
      </div>

    </div>
    <InstallationStatistics ref="refInstallationStatistics" :orgDevice='orgDevice'></InstallationStatistics>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  reqOrgCount,
  reqFlatType,
  reqOrgDevice
  // reqBuildingType
} from "@api/apiDatav.js";
import { mapState } from "vuex";
import InstallationStatistics from "./modeuls/InstallationStatistics.vue";

export default {
  components: {
    InstallationStatistics
  },
  data() {
    return {
      option: {
        //中间显示文字
        title: {
          // x: "40%",     //X坐标   
          // y: "35%",    //Y坐标
          text: "接入单位",   //主标题
          left: 'center',
          top: '40%',
          subtext: '100',   //副标题
          // textAlign: 'center', // 设置标题居中
          textStyle: {    //标题样式
            fontSize: 12,
            fontWeight: "bolder",
            color: "#fff",
            // transform: "translate(-50%,-50%)",
            // marginTop:"-50%",
            // marginLeft:"-50%",
            // left: 'center',
          },
          subtextStyle: {   //副标题样式
            fontSize: 15,
            fontWeight: "bolder",
            color: "#fff",
            formatter: '',
            // marginTop:"-50%",
            // marginLeft:"-50%",
            // transfrom:"translate(-50%,-50%)",
            // left: 'center',
            lineHeight: 13,
          },
        },
        tooltip: {
          trigger: "item",
        },
        label: {
          alignTo: "edge",
          // formatter: "{productName|{b}\t{c}台\r\n\t{d}%}",
          formatter: "{productName|{b}\t{d}%}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 12,
          rich: {
            name: {
              fontSize: 10,
              color: "inherit",
            },
          },
          width: 150,
        },
        color: [
          "#FFC83A",
          "#3AE7FF",
          "#00FEC4",
          "#A87EFF",
          "#1F7AFF",
          "#6BA7FF",
          "#FF8DD2",
          "#F3FFD0",
          "#FFDF00",
        ],
        series: [
          {
            name: "",
            type: "pie", //饼图
            hoverAnimation: false,  //是否开启 hover 在扇区上的放大动画效果。
            // radius: ["30%", "55%"], //饼图占位置比例
            radius: ["45%", "65%"], //饼图占位置比例
            center: ["50%", "50%"], //整个饼图在整个父元素中的位置
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 0,
            },
            // roseType: "radius",
            data: [
              // {
              //   value: 1,
              //   name: "门磁",
              // },
              // {
              //   value: 2,
              //   name: "燃气",
              // },
              // {
              //   value: 3,
              //   name: "红外",
              // },
            ],
            // 修饰引导线样式
            labelLine: {
              length: 2,
              length2: 15,//视觉引导项第二段的长度。
              maxSurfaceAngle: 180,
            },
          },
        ],
        //         graphic: [{ //环形图中间添加文字
        //     type: 'text', //通过不同top值可以设置上下显示
        //     left: '51%',
        //     top: '40%',
        //     style: {
        //         text: '21312',
        //         textAlign: 'center',
        //         fill: '#1E7CE8', //文字的颜色
        //         fontSize: 12,
        //         lineHeight: 16,
        //     }
        // }],
      },
      orgcount: 0,
      flag: false,
      switchover: require("@assets/images/datav/switchover.png"),
      orgDevice: []
    };
  },
  watch: {},
  computed: {
    ...mapState(["user","spacesManage"]),
  },
  methods: {
    onmore() {
      this.$refs.refInstallationStatistics.dialogVisible = true;
    },
    onClick() {
      this.flag = !this.flag;
      if (this.flag) {
        this.getFlatType()
      } else {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.dispose();//清除 ECharts 实例
      }
    },
    handleNodeClick(item) {
      // this.$parent.handleNodeClick(item, 1)
    },
    // 单位安装设备统计
    async getOrgDevice() {
      let res = await reqOrgDevice({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId:this.spacesManage.organizationInfo.orgId,
      });
      // console.log(res, '单位安装设备统计');
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgDevice = res.data.rows || [];
      if (this.orgDevice.length == 0) return;
      // 处理数据
      this.orgDevice.forEach(item => {
        item.count22 = 0;
        item.count23 = 0;
        item.count24 = 0;
        item.count25 = 0;
        item.count26 = 0;
        item.installList.forEach(item2 => {
          if (item2.year == '2022') {
            item.count22 = item2.count
          }
          if (item2.year == '2023') {
            item.count23 = item2.count
          }
          if (item2.year == '2024') {
            item.count24 = item2.count
          }
          if (item2.year == '2025') {
            item.count25 = item2.count
          }
          if (item2.year == '2026') {
            item.count26 = item2.count
          }
        })
        item.sun2 = item.count23 + item.count24 + item.count25
      })
    },
    // 租户下单位类型
    async getFlatType() {
      let res = await reqFlatType({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId:this.spacesManage.organizationInfo.orgId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.option.series[0].data = res.data.row.map(item => {
        if (item.flatType == '1') {
          item.name = '联网单位'
        } else if (item.flatType == '2') {
          item.name = '维保单位'
        } else if (item.flatType == '3') {
          item.name = '监管单位'
        } else if (item.flatType == '4') {
          item.name = '经销商'
        } else if (item.flatType == '5') {
          item.name = '工程商'
        } else if (item.flatType == '6') {
          item.name = '代理商'
        } 
        return {
          value: item.count,
          name: item.name
        }
      })
      await this.OrgCount()
      await this.getCahrt()
    },
    // 单位数量
    async OrgCount() {
      let res = await reqOrgCount({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId:this.spacesManage.organizationInfo.orgId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // this.orgcount=res.data.count;
      this.option.title.subtext = res.data.count;
    },
    // 租户下建筑物性质
    // async BuildingType(){
    //   let res = await reqBuildingType(this.user.tenantId);
    //   // console.log(res);
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    // },
    // 饼状图
    getCahrt() {
      var chartDom = document.getElementById("main");
      var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
      let listener = function () {
        deviceType.resize();
      };
      window.addEventListener("resize", listener);
      this.option && deviceType.setOption(this.option); // 使用指定的配置项和数据显示图表。
    },
  },

  mounted() {
  },
  created() { },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  height: 100%;
  width: 100%;
  display: inline-block;
  .fontSize(16);
  position: relative;

  .switchover {
    .height(48);
    position: absolute;
    top: 0;
    right: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .more {
    .height(48);
    position: absolute;
    top: 0;
    right: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    .height(43);
    width: 58%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/images/datav/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600
  }

  .div_box {
    .height(50);
    display: flex;
    color: #cccccc;
    .fontSize(12);
    .marginTop(14);
    .marginLeft(30);

    >div {
      >div:first-of-type {
        color: #CBCBCB;
      }

      >div:last-of-type {
        .marginTop(9);
      }
    }

    >div:last-of-type {
      .marginLeft(76);
    }

    span {
      .fontSize(26);
    }

    .span1 {
      // color: #ff8412;
      color: #fff;
    }

    .span2 {
      // color: #fc5d49;
      color: #fff;
    }
  }

  .count {
    overflow-y: auto;
    height: 69%;
    // padding: 0 1%;
  }

  .content {
    .fontSize(14);
    .height(40);
    .lineHeight(40);
    color: #fff;
    display: flex;
    padding: 0 1% 0 2%;
    box-sizing: border-box;

    >div {
      flex: 1;
      text-align: center;
    }

    >.text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      padding-left: 5px;
      // cursor: pointer;
    }
  }
}

::v-deep .el-progress__text {
  font-size: 17px !important;
}

.progress {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 66%;
}
</style>